<style>
    table{

        table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
    }
    td{
        width:100%;
        word-break:keep-all;/* 不换行 */
        white-space:nowrap;/* 不换行 */
        overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
        text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
    }
</style>
<div class="layui-form-item">
    <div class="layui-input-block">
       <a href="<?=base_url("word/words/add_word")?>" class="layui-btn" style="float: right;">新建话题</a>
    </div>
</div>
<form class="layui-form" id="search-form">
    <div style="min-height: 38px;margin-top: 5px;">
        <div class="layui-inline">
            <div class="layui-input-inline">
                <select name="status_type" lay-filter="online" id="online">
                    <option value="">上线状态</option>
                    <option value="2" >已上线</option>
                    <option value="1">已下线</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <select name="status_type" lay-filter="join_type" id="join_type">
                    <option value="">所属分类</option>
                    <?php if(!empty($type)){
                        foreach($type as $k=>$v){
                            ?>
                            <?php if($v['id']==$data['quality_join_type']){ ?>
                                <option value="<?=$v['id']?>" selected><?=$v['name']?></option>
                            <?php }else{ ?>
                                <option value="<?=$v['id']?>"><?=$v['name']?></option>
                            <?php } ?>
                        <?php }} ?>
                </select>
            </div>
        </div>
    </div>
</form>

<table class="layui-table">
    <colgroup>
        <col width="8%">
        <col width="12%">
        <col width="15%">
        <col width="8%">
        <col width="8%">
        <col width="6%">
        <col width="16%">
    </colgroup>
    <thead>
    <tr>
        <th>缩略图</th>
        <th>话题</th>
        <th>新建时间</th>
        <th>分类</th>
        <th>上线状态</th>
        <th>排序</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <?php if(!empty($data['row'])){
        foreach($data['row'] as $k=>$v){
    ?>
    <tr>
        <td><img src="<?=$v['sub_pic']?>" style="width:100px;height:65px;" class="tom_show_image"></td>
        <td><?=$v['sub_title']?></td>
        <td><?=$v['add_times']?></td>
        <td><?=$v['video_join_type_name']?></td>
        <?php if($v['online']==2){ ?>
            <td>上线</td>
        <?php }else{ ?>
            <td>下线</td>
        <?php } ?>
        <?php if(empty($v['sort']) || $v['sort']==999999999 || $v['sort']==9999999999){ ?>
            <td>0</td>
        <?php }else{ ?>
            <td><?=$v['sort']?></td>
        <?php } ?>
        <td>
            <input type="hidden" value="<?=$v['id']?>" class="video_uuid<?=$k+1?>">
                <a href="<?=base_url("word/words/edit_word?id={$v['id']}")?>" class="layui-btn layui-btn-xs" style="margin-left:5px;margin-bottom:8px;">编辑</a>
            <?php if($v['online']==2 && $v['is_other']!=999999999){ ?>
                <button class="layui-btn layui-btn-xs layui-btn-normal paixu<?=$k+1?>" style="margin-left:5px;margin-bottom:8px;">排序</button>
                <button class="layui-btn layui-btn-xs layui-btn-danger down<?=$k+1?>" style="margin-left:5px;margin-bottom:8px;">下线</button>
<!--                <button class="layui-btn layui-btn-xs del--><?//=$k+1?><!--">删除</button>-->
            <?php }?>

            <?php if($v['online']==1 && $v['is_other']!=999999999){ ?>
                <button class="layui-btn layui-btn-xs up<?=$k+1?>">上线</button>
            <?php }?>

        </td>
    </tr>
        <?php }}else{ ?>
        <tr>
            <td colspan="7" rowspan="3" style="color: #00CC00;font-size: 25px;height:100px;text-align: center;">暂无数据</td>
        </tr>
    <?php } ?>
    </tbody>
</table>
<div id="demo7"></div>
<script src="<?=SITE_BASE_URL?>/assets/plugins/dyj/layui_url.js"></script>
<script>
    //定义一个51的jquery数组
    var arr=[];
    for(var i=1;i<51;i++){
        arr.push(i)
    }
    $.each(arr,function(i,n) {
        var video_uuid = $(".video_uuid" + n).val();
        //排序
        $(".paixu"+n).click(function(){
            $.ajax({
                type: "post",
                data: {video_uuid:video_uuid},
                dataType: "json",
                url: "<?=base_url("word/words/paixu")?>",
                success: function (res) {
                    if(res.code==0){
                        layui.use('layer', function(){
                            var layer = layui.layer;
                            layer.open({
                                title:"排序",
                                type: 1,
                                area: ['500px', '300px'],
                                content: res.data //注意，如果str是object，那么需要字符拼接。
                                ,btn: ['保存', '取消']
                                ,yes: function(index, layero){
                                    var paixu=$(".edit_paixu").val()
                                    //按钮【按钮一】的回调
                                    $.ajax({
                                        type: "post",
                                        data: {paixu:paixu,video_uuid:video_uuid},
                                        dataType: "json",
                                        url: "<?=base_url("word/words/edit_paixu")?>",
                                        success: function (res) {
                                            if(res.code==0){
                                                layer.msg(res.msg, {time:1000},function(){
                                                    window.location.reload()
                                                });
                                            }else{
                                                layer.msg(res.msg, {time: 2000});
                                            }
                                        }
                                    })
                                }
                                ,btn2: function(index, layero){
                                    //按钮【按钮二】的回调
//                                    close(index)
                                }
                                ,cancel: function(){
                                    //右上角关闭回调

                                }
                            });
                        });
                    }else{
                        layer.msg(res.msg, {time: 2000});
                    }
                }
            })
        })
        //上线
        $(".up"+n).click(function(){
            $.ajax({
                type: "post",
                data: {video_uuid:video_uuid},
                dataType: "json",
                url: "<?=base_url("word/words/up_words")?>",
                success: function (res) {
                    if(res.code==0){
                        layer.msg(res.msg, {time:1000},function(){
                            window.location.reload()
                        });
                    }else{
                        layer.msg(res.msg, {time: 2000});
                    }
                }
            })
        })
        //下线
        $(".down"+n).click(function(){
            $.ajax({
                type: "post",
                data: {video_uuid:video_uuid},
                dataType: "json",
                url: "<?=base_url("word/words/down_words")?>",
                success: function (res) {
                    if(res.code==0){
                        layer.msg(res.msg, {time:1000},function(){
                            window.location.reload()
                        });
                    }else{
                        layer.msg(res.msg, {time: 2000});
                    }
                }
            })
        })

        //删除
        $(".del"+n).click(function(){
            $.ajax({
                type: "post",
                data: {video_uuid:video_uuid},
                dataType: "json",
                url: "<?=base_url("word/words/del_words")?>",
                success: function (res) {
                    if(res.code==0){
                        layer.msg(res.msg, {time:1000},function(){
                            window.location.reload()
                        });
                    }else{
                        layer.msg(res.msg, {time: 2000});
                    }
                }
            })
        })

    })
    $(function(){
        //监听下拉框变化
        layui.use('form', function(){
            var form = layui.form;
            //监听上下线状态
            form.on('select(online)', function(data){
                var online=data.value; //得到被选中的值
                window.location.href="<?=base_url("word/words/index?online=")?>"+online;
            });

            //监听分类
            form.on('select(join_type)', function(data){
                var join_type=data.value; //得到被选中的值
                window.location.href="<?=base_url("word/words/index?join_type=")?>"+join_type;
            });
        });

        //分页
        layui.use('laypage', function(){
            var laypage = layui.laypage;
            var param = GetRequest();
            //总页数大于页码总数
            laypage.render({
                elem: 'demo7'
                ,count:<?=$data['total']?>//数据总数
                ,curr: <?=$page?>
                ,limit:<?=$limit?>
                ,layout:  ['count', 'prev', 'page', 'next','limit', 'refresh', 'skip']
                ,jump: function(obj,first){
                    //首次不执行
                    if(!first){
                        var url = window.location.href;
                        url = url.substring(0, url.lastIndexOf('?'));

                        param['page'] = obj.curr;
                        param['limit'] = obj.limit;
                        window.location.href = createURL(url,param);
                    }
                }
            });
        });

    })
</script>